<template>
	<view>
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="button" active-color="#4cd964">

		</uni-segmented-control>
		<view class="content">
			<view v-show="current === 0">
				<input class="uni-input" type="digit" @input="onKeyInputm" focus placeholder="每期投入金额" />
				<input class="uni-input" type="digit" @input="onKeyInputn" placeholder="投入次数" />
				<input class="uni-input" type="digit" @input="onKeyInputr" placeholder="周期内收益率(3%输入3)" />
				<button type="primary" @click="count">开始计算</button>
			</view>
			<view v-show="current === 1">
				<input class="uni-input" type="digit" @input="onKeyInputm" focus placeholder="首次投入金额" />
				<input class="uni-input" type="digit" @input="onKeyInputn" placeholder="投入时长(一般是年为单位)" />
				<input class="uni-input" type="digit" @input="onKeyInputr" placeholder="周期内收益率(3%输入3,一般是年化收益率)" />
				<button type="primary" @click="count1">开始计算</button>
			</view>
			<view v-show="current === 2">
				<input class="uni-input" type="digit" @input="onKeyInputb" focus placeholder="首次投入金额" />
				<input class="uni-input" type="digit" @input="onKeyInputm" focus placeholder="每期增加投入金额" />
				<input class="uni-input" type="digit" @input="onKeyInputn" placeholder="投入次数(首次除外)" />
				<input class="uni-input" type="digit" @input="onKeyInputr" placeholder="周期内收益率(3%输入3)" />
				<button type="primary" @click="count2">开始计算</button>
			</view>
			<view class="text-box" scroll-y="true">
				<text>{{result}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import uniSegmentedControl from "@/components/uni-segmented-control/uni-segmented-control.vue"
	export default {
		components: {
			uniSegmentedControl
		},
		data() {
			return {
				items: ['定投', '固定','综合'],
				current: 0,
				b:0,
				m:0,
				n:0,
				r:0,
				result:'',
			}
		},
		methods: {
			count(){
				let total = 0;
				let benjin =this.n*this.m;
				for(let i = 0;i<this.n;i++){
					total += (Math.pow((1+this.r/100),this.n-i)* this.m);
				}
				this.result="一共：" + total +',其中本金：'+benjin+',收益：'+ (total-benjin) + ',整体收益率约：' + ((total-benjin)*100/benjin).toFixed(2) + '%';
			},
			count1(){
				let total = 0;
				let benjin =this.m;
				total += (Math.pow((1+this.r/100),this.n)* this.m);
				this.result="一共：" + total +',其中本金：'+benjin+',收益：'+ (total-benjin) + ',整体收益率约：' + ((total-benjin)*100/benjin).toFixed(2) + '%';
			},
			count2(){
				let total = (Math.pow((1+this.r/100),this.n)* this.b);
				let benjin =this.b + this.n*this.m;
				for(let i = 0;i<this.n;i++){
					total += (Math.pow((1+this.r/100),this.n-i)* this.m);
				}
				this.result="一共：" + total +',其中本金：'+benjin+',收益：'+ (total-benjin) + ',整体收益率约：' + ((total-benjin)*100/benjin).toFixed(2) + '%';
			},
			onKeyInputm(e) {
				this.m = e.target.value
			},
			onKeyInputn(e) {
				this.n = e.target.value
			},
			onKeyInputr(e) {
				this.r = e.target.value
			},
			onKeyInputb(e) {
				this.b = e.target.value
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
					this.result = "";
					this.b =0;
					this.r=0;
					this.m=0;
					this.n=0;
				}
			}
		}
	}
</script>

<style>
</style>
